const containerElement = document.querySelector(".container-sort");

HTTP.request({
  method: "GET",
  url: "/api/article/sort/all",
}).then((response) => {
  const result = response.data;
  const sorts = result.data;

  sorts.forEach((s) => {
    const section = document.createElement("section");
    const h3 = document.createElement("h3");

    section.id = s.name;
    h3.innerHTML = s.name;
    section.appendChild(h3);

    containerElement.appendChild(section);

    HTTP.request({
      method: "GET",
      url: `/api/article/sort/${s.id}/page/1`,
    }).then((response) => {
      const result = response.data;
      const articles = result.data;

      if (!articles || articles.length === 0) {
        const span = document.createElement("span");
        span.classList.add("nothing");
        span.innerHTML = "暂无内容";
        section.appendChild(span);
        return;
      }

      // 添加一个 ul
      const ul = document.createElement("ul");
      section.appendChild(ul);
      // 添加 li
      articles.forEach((a) => {
        const li = document.createElement("li");
        li.classList.add("box-article-information");

        li.innerHTML = `
                    <a class="box-article-information-title" href="/pages/article.html?id=${a.id}">${a.title}</a>
                    <div class="box-article-information-date">${a.date}</div>
                `;

        ul.appendChild(li);
      });
    });
  });
});
